<template>
	<view class="content">
		<view style="height: 1rpx;"></view>
		<span>个人简介</span>
		<view class="self-description">
			<span>自我描述</span>
			<textarea v-model="selfDescription" placeholder="请输入正文,不超过150字" 
			placeholder-style="color: #99A3A3;font-size: 24rpx;" 
			maxlength="150"></textarea>
			
			<span v-if="!alipay">
				<span v-if="!selfDescription">0</span>
				<span v-if="selfDescription">{{selfDescription && selfDescription.length}}</span>
			/150</span>
			
			
		</view>
		<view class="personalTags" @click="toChooseTags">
			<span>个人标签</span>
			<image src="/static/img/my_slices/Frame222@2x.png" mode="scaleToFill"></image>
			<view class="tags">
				<view class="tag" v-for="item,index in tagList" :key="index">
					<span>{{item}}</span>
				</view>
			</view>
		</view>
		<view class="skillCertificate">
			<span>技能证书</span>
			<view @click="remove">
				<span>管理</span>
			</view>
			
			<view class="tags">
				<view class="tag" v-for="item,index in skillCertificateList" :key="index">
					<span>{{item}}</span>
					<view class="" v-show="isRemove" @click="removeSkillCernificate(index)">
						<image src="/static/img/my_slices/close@2x.png" alt="" v-show="isRemove" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="img" @click="popupShow=true" >
					<image src="@/subpageA/static/img/my_slices/Group231@2x.png" mode="scaleToFill"></image>
				</view>
				<u-popup :show="popupShow" :round="10" mode="bottom" @close="close"
				:closeable='true'>
					<view class="popup">
						<span>输入证书名称</span>
						<view class="">
							<input type="text" v-model="skillCertificate" 
							placeholder="如:英语四级证书">
							<view class="img" @click="add"> 
								<image src="@/subpageA/static/img/my_slices/Group242@2x.png" mode="scaleToFill"></image>
							</view>
						</view>
					</view>
				</u-popup>
			</view>
		</view>
		<button @click="toFinishResume4">下一步</button>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				alipay:false,				//是否是支付宝小程序环境
				selfDescription:'',			//自我描述
				tagList:[],					//标签列表
				skillCertificateList:[],	//技能证书列表
				popupShow:false,			//弹出层
				skillCertificate:'',
				isRemove:false,				//控制可删除状态
			};
		},
		onLoad() {
			//#ifdef MP-ALIPAY
			this.alipay=true;
			//#endif
			
			let resumeInfo=uni.getStorageSync('resumeInfo')
			this.selfDescription=resumeInfo.selfDesc
			this.tagList=resumeInfo.tags
			this.skillCertificate=resumeInfo.skills
		},
		onShow() {
			this.tagList=uni.getStorageSync('tagsList')
			
		},
		methods:{
			toChooseTags(){
				uni.navigateTo({
					url:'./chooseTags'
				})
			},
			
			//添加技能证书
			add(){
				if(this.skillCertificate!=''){
					this.skillCertificateList.push(this.skillCertificate);
					this.skillCertificate='';
					this.popupShow=false;
				}
			},
			close(){
				this.popupShow=false;
				this.skillCertificate='';
			},
			
			//开启可删除状态
			remove(){
				this.isRemove=!this.isRemove;
			},
			
			//删除技能证书
			removeSkillCernificate(index){
				this.skillCertificateList.splice(index,1)
			},
			toFinishResume4(){
				if(!this.selfDescription){
					uni.showToast({
						title:"请完善必填项",
						duration:1500,
						icon:'none'
					})
				}
				
				let resumeInfo=uni.getStorageSync('resumeInfo')
				console.log(resumeInfo);
				let tempObj={
					selfDesc:this.selfDescription,
					tags:this.tagList,
					skills:this.skillCertificate
				}
				Object.assign(resumeInfo,tempObj)
				uni.setStorageSync('resumeInfo',resumeInfo)
				// uni.setStorageSync('selfDesc',this.selfDescription)
				// uni.setStorageSync('tags',this.tagList)
				// uni.setStorageSync('skills',this.skillCertificateList)
				
				uni.navigateTo({
					url:'./finishResume4'
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		min-height: 100vh;
		background-color: #F3F7F8;
		
		>span{
			display: inline-block;
			margin: 32rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}
		
		.self-description{
			position: relative;
			width: 686rpx;
			height: 384rpx;
			margin:0 32rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			
			>span:nth-of-type(1){
				display: inline-block;
				margin: 32rpx;
				font-size: 14px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #001A18;
			}
			
			>textarea{
				width: 586rpx;
				height: 176rpx;
				padding: 20rpx;
				padding-bottom: 60rpx;
				margin: 0 30rpx;
				background: #F3F7F8;
				border-radius: 16rpx;
			}
			.placeholderClass{
				font-size: 12px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #99A3A3;
			}
			
			>span:nth-of-type(2){
				position: absolute;
				right: 48rpx;
				bottom: 36rpx;
				font-size: 10px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #99A3A3;
			}
		}

		.personalTags{
			position: relative;
			width: 622rpx;
			margin: 32rpx;
			padding: 32rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			
			>span:nth-of-type(1){
				font-size: 14px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #001A18;
			}
			
			image{
				position: absolute;
				right: 40rpx;
				top: 40rpx;
				width: 12rpx;
				height: 26rpx;
			}
		
			.tags{
				.tag{
					display: inline-block;
					margin-right: 20rpx;
					margin-top: 14rpx;
					padding: 12rpx 12rpx;
					background: #08C8BD;
					border-radius: 8rpx;
					font-size: 12px;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		
		}
		
		.skillCertificate{
			width: 622rpx;
			min-height: 116rpx;
			margin: 0 32rpx;
			padding: 32rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			
			>span:nth-of-type(1){
				font-size: 14px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #001A18;
			}
			>view:nth-of-type(1){
				margin-top: 6rpx;
				float: right;
				>span{
					margin-top: 6rpx;
					float: right;
					font-size: 12px;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FF5F58;
				}
			}
			
			
			.tags{
				
				.tag{
					display: inline-block;
					margin-right: 20rpx;
					margin-top: 14rpx;
					padding: 12rpx 24rpx;
					background: #08C8BD;
					border-radius: 8rpx;
					font-size: 12px;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					
					view{
						display: inline-block;
						margin-left: 16rpx;
						image{
							width: 24rpx;
							height: 24rpx;
							vertical-align: -4rpx;
						}
					}
				}
				
				>.img{
					display: inline-block;
					height: 71rpx;
					image{
						width: 48rpx;
						height: 48rpx;
						margin-top: 12rpx;
						vertical-align: -14rpx;
					}
				}	
				
				
				.popup{
					
					display: flex;
					flex-direction: column;
					align-items: center;
					>span{
						display: inline-block;
						margin: 30rpx;
						font-size: 16px;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #001A18;
					}
					
					>view{
						display: flex;
						margin-bottom: 64rpx;
						input{
							height: 60rpx;
							width: 546rpx;
							padding: 20rpx;
							background: #F3F7F8;
							border-radius: 16rpx 0px 0px 16rpx;
						}
						.img{
							display: flex;
							justify-content: center;
							align-items: center;
							background: #F3F7F8;
							border-radius: 0rpx 16px 16px 0rpx;
							height: 100rpx;
							width: 100rpx;
							image{
								width: 60rpx;
								height: 60rpx;
							}
						}
					}
				}
			}
		}
	
		button{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 686rpx;
			height: 96rpx;
			margin: 32rpx;
			margin-top: 96rpx;
			background: #08C8BD;
			border-radius: 16rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>
